import 'package:fluentui_system_icons/fluentui_system_icons.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:karyo/karyo.dart';
import 'package:karyo/src/login/bloc/login_bloc.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
import 'package:flutter_icons/flutter_icons.dart';

import '../components/already_have_an_account_acheck.dart';
import '../components/rounded_button.dart';
import '../components/rounded_input_field.dart';
import '../components/rounded_password_field.dart';
import '../Login/login_screen.dart';

class SignUpScreen extends StatefulWidget {
  @override
  _SignUpScreenState createState() => _SignUpScreenState();
}

class _SignUpScreenState extends State<SignUpScreen> {
  TextEditingController _nameController = new TextEditingController();
  TextEditingController _pwdController = new TextEditingController();
  TextEditingController _inviteCodeController = new TextEditingController();

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    LoginBloc loginBloc = BlocProvider.of(context);

    return Scaffold(
        body: Stack(children: [
      BackgroundSignUp(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SizedBox(height: size.height * 0.1),
              Text("注册 Daybreak",
                  style: NORMAL_BOLD_TXT_STYLE.copyWith(
                      color: COLOR_PRIMARY, fontSize: 28)),
              SizedBox(height: size.height * 0.07),
              SvgPicture.asset(
                "assets/illustrations/undraw_Progress_indicator_re_4o4n.svg",
                height: size.height * 0.2,
              ),
              SizedBox(height: size.height * 0.07),
              RoundedInputField(
                hintText: "手机号/微信号(唯一标识)",
                onChanged: (value) {},
                controller: _nameController,
              ),
              RoundedPasswordField(
                onChanged: (value) {},
                controller: _pwdController,
              ),
              RoundedInputField(
                hintText: "邀请码",
                icon: FluentIcons.inprivate_account_16_filled,
                onChanged: (value) {},
                controller: _inviteCodeController,
              ),
              Padding(
                child: Text(
                  "Daybreak正式进入内测，邀请码请从老用户处申请获取，或从知乎等渠道搜索，数额有限先到先得",
                  style: EX_SMALL_TXT_STYLE,
                ),
                padding: EdgeInsets.symmetric(horizontal: 64),
              ),
              SizedBox(height: size.height * 0.02),
              RoundedButton(
                color: COLOR_PRIMARY,
                text: "注册",
                press: () {
                  // register
                  loginBloc.registerWithInviteCode(
                      _nameController.text, _pwdController.text, _inviteCodeController.text, context);
                },
              ),
              SizedBox(height: size.height * 0.01),
              AlreadyHaveAnAccountCheck(
                login: false,
                press: () {
                  showCupertinoModalBottomSheet(
                    // showAvatarModalBottomSheet(
                    useRootNavigator: true,
                    elevation: 12,
                    expand: false,
                    context: context,
                    builder: (context) {
                      return BlocProvider(
                        bloc: loginBloc,
                        child: LoginScreen(),
                      );
                    },
                  );

                  // Navigator.push(
                  //   context,
                  //   MaterialPageRoute(
                  //     builder: (context) {
                  //       return BlocProvider(
                  //         bloc: loginBloc,
                  //         child: LoginScreen(),
                  //       );
                  //     },
                  //   ),
                  // );
                },
              ),
              OrDivider(),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  IconButton(
                      icon: Icon(
                        FlutterIcons.wechat_faw,
                        color: Colors.green,
                      ),
                      onPressed: () {
                        showToast(context, "微信登录即将开放", COLOR_PRIMARY);
                      }),
                  SizedBox(
                    width: 10,
                  ),
                  IconButton(
                      icon: Icon(FlutterIcons.qq_faw),
                      onPressed: () {
                        showToast(context, "QQ登录即将开放", COLOR_PRIMARY);
                      }),
                  SizedBox(
                    width: 10,
                  ),
                  IconButton(
                      icon: Icon(FlutterIcons.weibo_faw),
                      onPressed: () {
                        showToast(context, "微博登录即将开放", COLOR_PRIMARY);
                      }),
                ],
              ),
              SizedBox(height: 20),
            ],
          ),
        ),
      ),
      Positioned(
        left: 16,
        top: 38,
        child: buildBackButton(context, COLOR_PRIMARY),
      ),
    ]));
  }
}

class BackgroundSignUp extends StatelessWidget {
  final Widget child;
  const BackgroundSignUp({
    Key key,
    @required this.child,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      height: size.height,
      width: double.infinity,
      // Here i can use size.width but use double.infinity because both work as a same
      child: Stack(
        alignment: Alignment.center,
        children: <Widget>[
          Positioned(
            top: 0,
            left: 0,
            child: Image.asset(
              "assets/images/signup_top.png",
              width: size.width * 0.35,
            ),
          ),
          Positioned(
            bottom: -30,
            left: -30,
            child: Image.asset(
              "assets/images/main_bottom.png",
              width: size.width * 0.25,
            ),
          ),
          child,
        ],
      ),
    );
  }
}

class OrDivider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      margin: EdgeInsets.symmetric(vertical: size.height * 0.02),
      width: size.width * 0.8,
      child: Row(
        children: <Widget>[
          buildDivider(),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10),
            child: Text(
              "OR",
              style: TextStyle(
                color: COLOR_ACCENT,
                fontWeight: FontWeight.w600,
              ),
            ),
          ),
          buildDivider(),
        ],
      ),
    );
  }

  Expanded buildDivider() {
    return Expanded(
      child: Divider(
        color: Color(0xFFD9D9D9),
        height: 1.5,
      ),
    );
  }
}
